<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		smsSendApi,
		createApi,
		uploadApi,
	} from "@/assets/api/tarbar/create.js"
	import {
		navigateBack
	} from "@/assets/scripts/navigate.js";
	import {
		editRelationListApi,
		backgroundImgApi,
	} from "@/assets/api/other/sacrificeForm.js"

	const props = defineProps(['data'])
	const datetimePicker = ref()
	const bgPopup = ref()
	const backgroundImgList = ref([])
	const certificateOfDeceased1 = ref([])
	const backgroundImgIndex = ref(-1)
	const datetimePickerValue = ref(Number(new Date()))
	const formKey = ref('')
	const relationPicker = ref()
	const form = ref()
	const ratioWidth = ref(100)
	const ratioHeight = ref(100)
	const cropperUrl = ref('')
	const cropperUrlKey = ref('')
	const sendPhone = ref(false)
	const isUploading = ref(false)
	const relationColumns = ref([
		[
			'儿孙辈', '同辈', '父辈', '亲朋好友', '祖辈', '其他'
		],
		[]
	])

	const model = ref({
		mmType: 'mm_type_one',
		mmSex1: '0',
		mmSex2: '1',
		mmName1: '',
		certificateOfDeceased1: '',
		phone: '',
		code: '',
		mmName2: '',
		mmDate1: 'time_type_private',
		mmDate2: 'time_type_private',
		relation: '',
		isPublic: '0',
		meT: '0',
	})
	const relationColumnData = [
		['儿子', '女儿', '孙子', '孙女', '外孙', '外孙女', '外甥', '外甥女', '侄子侄女', '儿媳', '女婿', '孙媳妇', '孙女婿', '外孙媳妇', '外孙女婿', '外甥媳妇',
			'外甥女婿', '侄媳妇', '侄女婿', '外孙/外孙女', '孙子/孙女', '儿子/女儿', '侄子/侄女', '外甥外甥女', '侄儿', '子侄辈', '后裔'
		],
		['丈夫', '妻子', '姐姐', '妹妹', '哥哥', '弟弟', '表哥', '表姐', '堂哥', '堂姐', '堂弟', '堂妹', '表弟', '表妹', '表嫂', '表姐夫', '姐夫', '嫂子',
			'弟媳', '弟妹', '哥姐', '妹夫'
		],
		['父亲', '母亲', '伯伯', '伯母', '叔叔', '婶婶', '姑姑', '姑父', '姨妈', '姨夫', '舅舅', '舅妈', '双亲', '父母', '公婆', '岳父母'],
		['挚友', '亲友', '朋友', '战友', '老师', '同学', '学生', '领导', '同事', '邻居', '远亲'],
		['祖父', '祖母', '外祖父', '外祖母', '祖父母', '外祖父母'],
		['粉丝', '故人', '男朋友', '女朋友', '其他'],
	]
	const rules = {
		phone: {
			type: 'string',
			required: true,
			message: '请填写手机号码',
			trigger: ['blur', 'change']
		},
		code: {
			type: 'string',
			required: true,
			message: '请填写验证码',
			trigger: ['blur', 'change']
		},
		pwd: {
			type: 'string',
			required: model.isPublic == 1 ? true : false,
			message: '请填写密码',
			trigger: ['blur', 'change']
		},
		mmSex1: {
			type: 'string',
			required: true,
			message: '请填写性别',
			trigger: ['blur', 'change']
		},
		mmSex2: {
			type: 'string',
			required: model.value.mmType === 'mm_type_one' ? false : true,
			message: '请填写性别',
			trigger: ['blur', 'change']
		},
		mmName1: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		mmName2: {
			type: 'string',
			required: model.value.mmType === 'mm_type_one' ? false : true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		relation: {
			type: 'string',
			required: true,
			message: '请选择关系',
			trigger: ['blur', 'change']
		},
		mmBorn1: {
			type: 'string',
			required: true,
			message: '请选择时间',
			trigger: ['blur', 'change']
		},
		mmPassAwayDate1: {
			type: 'string',
			required: true,
			message: '请选择时间',
			trigger: ['blur', 'change']
		},
		mmBorn2: {
			type: 'string',
			required: model.value.mmType === 'mm_type_one' ? false : true,
			message: '请选择时间',
			trigger: ['blur', 'change']
		},
		mmPassAwayDate2: {
			type: 'string',
			required: model.value.mmType === 'mm_type_one' ? false : true,
			message: '请选择时间',
			trigger: ['blur', 'change']
		},
	}

	const handleSelectTime = (key) => {
		formKey.value = key
		datetimePicker.value.open()
	}

	const datetimePicker_handleConfirm = (e) => {
		model.value[formKey.value] = new Date(e.value).toLocaleDateString()
		datetimePicker.value.close()
	}

	const handleSelectRelation = () => {
		relationPicker.value.setColumnValues(1, relationColumnData[0]);
		relationPicker.value.open()
	}

	const relation_handleChange = (e) => {
		if (e.columnIndex == 0) {
			relationPicker.value.setColumnValues(1, relationColumnData[e.index]);
		}
	}

	const relation_handleConfirm = (e) => {
		model.value.relation = e.value[1]
		relationPicker.value.close()
	}

	const handleUploadSuccess = async (e, key) => {
		// console.log(e.tempFiles[0]);
		const extnameStr = 'PNG,JPG,JPEG,BMP,bmp,jpeg,png,jpg'
		if (e.tempFiles && (!e.tempFiles[0] || (e.tempFiles[0] && !extnameStr.split(',').some(extname => e
				.tempFiles[0].extname ===
				extname)))) {
			uni.showToast({
				title: '请上传图片',
				icon: 'error'
			})
			return
		}
		const res = await uploadApi(key, e.tempFilePaths[0])
		if (res.code === 200) {
			uni.showToast({
				title: '上传成功',
				icon: 'success',
				complete: () => {
					const url = res.url
					if (key === 'certificateOfDeceased1') {
						const name = url.replace('http://memories-s1.oss-cn-beijing.aliyuncs.com/', '')
						certificateOfDeceased1.value.push({
							url,
							extname: name.split('.')[1] || '',
							name: name
						})
						// let urlList = []
						// if (typeof model.value[key] === 'string' && model.value[key] !== '') {
						// 	urlList = model.value[key].split(',')
						// }
						// urlList.push(url)
						// model.value[key] = Array.from(new Set(urlList)).join(',')
					} else {
						model.value[key] = url
					}
				}
			})
		} else {
			uni.showToast({
				title: '上传失败',
				icon: 'error'
			})
		}
	}

	const handleAdd = async () => {
		if (model.value.mmType == 'mm_type_one') {
			let params = {
				mmType: model.value.mmType,
				mmName1: model.value.mmName1,
				mmSex1: model.value.mmSex1,
				mmImg1: model.value.mmImg1,
				mmDate1: model.value.mmDate1,
				mmBorn1: model.value.mmBorn1,
				mmPassAwayDate1: model.value.mmPassAwayDate1,
				relation: model.value.relation,
				epitaph: model.value.epitaph,
				desc: model.value.desc,
				isPublic: model.value.isPublic,
				pwd: model.value.pwd,
				meT: model.value.meT,
				backgroundImg: model.value.backgroundImg,
				phone: model.value.phone,
				code: model.value.code,
			}
			params.certificateOfDeceased1 = certificateOfDeceased1.value.map(o => o.url).join(',')
			if (params.mmBorn1) {
				params.mmBorn1 = params.mmBorn1.replace(/\//g, '-')
			}
			if (params.mmPassAwayDate1) {
				params.mmPassAwayDate1 = params.mmPassAwayDate1.replace(/\//g, '-')
			}
			if (!params.mmImg1) {
				params.mmImg1 = params.mmSex1 == '1' ? '/static/image/avatar/1.png' :
					'/static/image/avatar/2.png'
			}
			if (!params.backgroundImg) {
				if (backgroundImgList.value.length) {
					params.backgroundImg = backgroundImgList.value[0].imgUrl
				} else {
					params.backgroundImg = '/assets/pic/stele-bg-demo.png'
				}
			}
			// console.log(params);
			const res = await createApi(params)
			if (res.code === 200) {
				// console.log(res);
				uni.showToast({
					title: '新增成功',
					icon: 'success',
					duration: 1000,
					complete: () => {
						setTimeout(() => {
							navigateBack()
						}, 1500)
					}
				})
			} else {
				uni.showToast({
					title: '新增失败',
					icon: 'error',
				})
			}
		} else {
			let params = JSON.parse(JSON.stringify(model.value))
			params.certificateOfDeceased1 = certificateOfDeceased1.value.map(o => o.url).join(',')
			if (params.mmBorn1) {
				params.mmBorn1 = params.mmBorn1.replace(/\//g, '-')
			}
			if (params.mmPassAwayDate1) {
				params.mmPassAwayDate1 = params.mmPassAwayDate1.replace(/\//g, '-')
			}
			if (params.mmBorn2) {
				params.mmBorn2 = params.mmBorn2.replace(/\//g, '-')
			}
			if (params.mmPassAwayDate2) {
				params.mmPassAwayDate2 = params.mmPassAwayDate2.replace(/\//g, '-')
			}
			if (!params.mmImg1) {
				params.mmImg1 = params.mmSex1 == '1' ? '/static/image/avatar/1.png' :
					'/static/image/avatar/2.png'
			}
			if (!params.mmImg2) {
				params.mmImg2 = params.mmSex2 == '1' ? '/static/image/avatar/1.png' :
					'/static/image/avatar/2.png'
			}
			if (!params.backgroundImg) {
				params.backgroundImg = '/assets/pic/stele-bg-demo.png'
			}
			const res = await createApi(params)
			if (res.code === 200) {
				// console.log(res);
				uni.showToast({
					title: '新增成功',
					icon: 'success',
					duration: 1000,
					complete: () => {
						setTimeout(() => {
							navigateBack()
						}, 1500)
					}
				})
			} else {
				uni.showToast({
					title: '新增失败',
					icon: 'error',
				})
			}
		}
	}

	const handleEdit = async () => {
		let params = JSON.parse(JSON.stringify(model.value))
		params.certificateOfDeceased1 = certificateOfDeceased1.value.map(o => o.url).join(',')
		if (params.mmBorn1) {
			params.mmBorn1 = params.mmBorn1.replace(/\//g, '-')
		}
		if (params.mmPassAwayDate1) {
			params.mmPassAwayDate1 = params.mmPassAwayDate1.replace(/\//g, '-')
		}
		if (params.mmBorn2) {
			params.mmBorn2 = params.mmBorn2.replace(/\//g, '-')
		}
		if (params.mmPassAwayDate2) {
			params.mmPassAwayDate2 = params.mmPassAwayDate2.replace(/\//g, '-')
		}
		if (!params.mmImg1) {
			params.mmImg1 = params.mmSex1 == '1' ? '/static/image/avatar/1.png' :
				'/static/image/avatar/2.png'
		}
		if (!params.mmImg2) {
			params.mmImg2 = params.mmSex2 == '1' ? '/static/image/avatar/1.png' :
				'/static/image/avatar/2.png'
		}
		if (!params.backgroundImg) {
			if (backgroundImgList.value.length) {
				params.backgroundImg = backgroundImgList.value[0].imgUrl
			} else {
				params.backgroundImg = '/assets/pic/stele-bg-demo.png'
			}
		}
		const res = await editRelationListApi(params)
		if (res.code === 200) {
			// console.log(res);
			uni.showToast({
				title: '更新成功',
				icon: 'success',
				duration: 1000,
				complete: () => {
					setTimeout(() => {
						navigateBack()
					}, 1500)
				}
			})
		} else {
			uni.showToast({
				title: '更新失败',
				icon: 'error',
			})
		}
	}

	const handleSubmit = () => {
		form.value.validate().then(async (res) => {
			// console.log(model.value);
			if (props.data) {
				handleEdit()
			} else {
				handleAdd()
			}
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: Array.isArray(errors) && errors.length ? errors[0].message : '校验失败'
			})
		})
	}

	const handleSelectBgImg = () => {
		bgPopup.value.open()
	}

	const bgBtn_handleConfirm = () => {
		model.value.backgroundImg = backgroundImgList.value[backgroundImgIndex.value].imgUrl
		bgPopup.value.close()
	}

	const cropper_handleCancel = () => {
		cropperUrl.value = "";
	}

	const cropper_handleOk = (ev) => {
		cropperUrl.value = "";
		handleUploadSuccess({
			tempFilePaths: [ev.path]
		}, cropperUrlKey.value)
	}

	const cropper_handleSelect = (key, width, height) => {
		cropperUrlKey.value = key
		ratioWidth.value = width
		ratioHeight.value = height
		uni.chooseImage({
			count: 1,
			success: (rst) => {
				// 设置url的值，显示控件
				cropperUrl.value = rst.tempFilePaths[0];
			}
		});
	}

	const getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 300;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	const bindDateChange = (e, key) => {
		model.value[key] = e.detail.value
	}

	const handleSendMsg = async () => {
		try {
			if (sendPhone.value) {
				throw new Error('操作频繁');
			}
			sendPhone.value = true
			if (model.value.phone.length !== 11) {
				return
			}
			const res = await smsSendApi(model.value.phone);
			if (res) {
				uni.showToast({
					title: '发送成功',
					icon: 'success'
				})
			} else throw new Error('');
		} catch (e) {
			uni.showToast({
				title: e?.messgae || '发送失败',
				icon: 'error',
				success: () => {
					setTimeout(() => {
						sendPhone.value = false
					}, 1000)
				}
			})
		} finally {
			setTimeout(() => {
				sendPhone.value = false
			}, 10000)
		}
	}

	onMounted(() => {
		backgroundImgList_init()
		model_init()
	})

	const backgroundImgList_init = async () => {
		const res = await backgroundImgApi()
		if (res.code === 200) {
			backgroundImgList.value = res.rows
		}
	}

	const model_init = () => {
		if (props.data) {
			const proxy = JSON.parse(JSON.stringify(props.data || {}))
			for (let key in proxy) {
				if (!proxy[key]) {
					delete proxy[key];
				}
			}
			model.value = {
				...model.value,
				...proxy
			}
			if (model.value.certificateOfDeceased1) {
				let list = []
				if (typeof model.value.certificateOfDeceased1 === 'string' && model.value.certificateOfDeceased1 !==
					'') {
					list = model.value.certificateOfDeceased1.split(',')
				}
				certificateOfDeceased1.value = list.map(o => {
					const name = o.replace('http://memories-s1.oss-cn-beijing.aliyuncs.com/', '')
					return {
						url: o,
						extname: name.split('.')[1] || '',
						name: name
					}
				})
			}
		} else {
			certificateOfDeceased1.value = []
		}
	}
</script>

<template>
	<ksp-cropper mode="ratio" :width="ratioWidth" :height="ratioHeight" :maxWidth="1024" :maxHeight="1024"
		:url="cropperUrl" @cancel="cropper_handleCancel" @ok="cropper_handleOk"></ksp-cropper>

	<uv-datetime-picker ref="datetimePicker" v-model="datetimePickerValue" mode="date"
		@confirm="datetimePicker_handleConfirm">
	</uv-datetime-picker>
	<uv-picker ref="relationPicker" :columns="relationColumns" @change="relation_handleChange"
		@confirm="relation_handleConfirm"></uv-picker>

	<uv-popup ref="bgPopup" mode="center" round='10' closeable>
		<view class="bg-popup">
			<view class="font-fs20 font-wb d-flex d-flex-jcc color-333">
				请选择背景图片
			</view>
			<view class="mt-normal">
				<scroll-view scroll-y="true" class="scroll-view">
					<div class="d-flex d-flex-fww">
						<view :class="['item', {'con':index==backgroundImgIndex}]"
							v-for="(item, index) in backgroundImgList" :key="index" @click="backgroundImgIndex = index">
							<image :src="item.imgUrl" mode="scaleToFill" class="image image-fill"></image>
						</view>
					</div>
				</scroll-view>
			</view>
			<view class="px-big mt-big">
				<view class="px-big ">
					<uv-button type="success" text="确定" shape='circle' @click="bgBtn_handleConfirm"></uv-button>
				</view>
			</view>
		</view>
	</uv-popup>
	<view class="pb-normal">
		<image src="@/assets/pic/sacrificeForm-bg.png" mode="scaleToFill" class="image image-fill-x bg-ad">
		</image>
		<view class="p-small text-ad">
			为保证纪念馆的真实性，请认真填写纪念馆信息。若暂时没有逝者照片，将为您选择系统照片。逝者出生逝世日期记不清，可以先选择大致日期，纪念馆创建完成后，在逝者信息页，可以随时修改与完善逝者信息。
		</view>
		<uv-form :model="model" :rules="rules" ref="form" labelWidth="8em" class="form">
			<uv-form-item label="纪念馆类型" class="px-big bg-white" prop="sex" borderBottom required>
				<uv-radio-group v-model="model.mmType">
					<uv-radio label="单人馆" name="mm_type_one" class="mr-normal">
					</uv-radio>
					<uv-radio label="双人馆" name="mm_type_two">
					</uv-radio>
				</uv-radio-group>
			</uv-form-item>

			<!-- 纪念馆背景 -->
			<uv-form-item label="纪念馆背景" class="px-big mt-small bg-white" prop="backgroundImg" borderBottom>
				<image v-if="model.backgroundImg" :src="model.backgroundImg" class="image image-fill-x" mode="widthFix">
				</image>
				<uv-button type="primary" class="ml-normal" :text="model.backgroundImg?'更换':'选择'"
					@click="handleSelectBgImg"></uv-button>
			</uv-form-item>

			<!-- 逝者的信息 -->
			<uv-form-item label="逝者照片" class="px-big mt-small bg-white" prop="mmImg1" borderBottom>
				<!-- <uni-file-picker limit='1' :auto-upload='false' @select="handleUploadSuccess($event, 'mmImg1')" /> -->
				<image v-if="model.mmImg1" :src="model.mmImg1" class="image image-fill-x avatar" mode="widthFix">
				</image>
				<uv-button type="primary" class="ml-normal" :text="model.mmImg1?'更换':'选择'"
					@click="cropper_handleSelect('mmImg1', 120, 180)"></uv-button>
			</uv-form-item>
			<uv-form-item label="逝者姓名" class="px-big mt-small bg-white" prop="mmName1" borderBottom required>
				<uv-input v-model="model.mmName1" border="none" placeholder="请输入姓名">
				</uv-input>
			</uv-form-item>
			<uv-form-item label="逝者性别" class="px-big bg-white" prop="mmSex1" borderBottom required>
				<uv-radio-group v-model="model.mmSex1">
					<uv-radio label="男" name="0" class="mr-normal">
					</uv-radio>
					<uv-radio label="女" name="1">
					</uv-radio>
				</uv-radio-group>
			</uv-form-item>
			<uv-form-item label="时间类型" class="px-big bg-white" prop="mmDate1" borderBottom required>
				<uv-radio-group v-model="model.mmDate1">
					<uv-radio label="农历" name="time_type_private" class="mr-normal">
					</uv-radio>
					<uv-radio label="公历" name="time_type_public">
					</uv-radio>
				</uv-radio-group>
			</uv-form-item>
			<uv-form-item label="出生日期" class="px-big bg-white" prop="mmBorn1" borderBottom required>
				<view class="d-flex d-flex-aic">
					<view>
						<span class="lunar mr-small" v-show="model.mmDate1 == 'time_type_private'">农</span>
						<span class="gregorian mr-small" v-show="model.mmDate1 == 'time_type_public'">公</span>
					</view>
					<picker class="d-flex-fx1" mode="date" :value="model.mmBorn1" :start="getDate('start')"
						:end="getDate('end')" @change="bindDateChange($event,'mmBorn1')">
						<view class="uni-input">{{model.mmBorn1||'请选择出生日期'}}</view>
					</picker>
				</view>
			</uv-form-item>
			<uv-form-item label="逝世日期" class="px-big bg-white" prop="mmPassAwayDate1" borderBottom required>
				<view class="d-flex d-flex-aic">
					<view>
						<span class="lunar mr-small" v-show="model.mmDate1 == 'time_type_private'">农</span>
						<span class="gregorian mr-small" v-show="model.mmDate1 == 'time_type_public'">公</span>
					</view>
					<picker class="d-flex-fx1" mode="date" :value="model.mmPassAwayDate1" :start="getDate('start')"
						:end="getDate('end')" @change="bindDateChange($event,'mmPassAwayDate1')">
						<view class="uni-input">{{model.mmPassAwayDate1||'请选择逝世日期'}}</view>
					</picker>
				</view>
			</uv-form-item>

			<!-- 双人馆才出现 -->
			<view class="mt-small" v-show="model.mmType == 'mm_type_two'">
				<uv-form-item label="逝者照片" class="px-big mt-small bg-white" prop="mmImg2" borderBottom>
					<!-- <uni-file-picker limit='1' :auto-upload='false' @select="handleUploadSuccess($event, 'mmImg2')" /> -->
					<image v-if="model.mmImg2" :src="model.mmImg2" class="image image-fill-x avatar" mode="widthFix">
					</image>
					<uv-button type="primary" class="ml-normal" :text="model.mmImg2?'更换':'选择'"
						@click="cropper_handleSelect('mmImg2', 120, 180)"></uv-button>
				</uv-form-item>
				<uv-form-item label="逝者姓名" class="px-big mt-small bg-white" prop="mmName2" borderBottom required>
					<uv-input v-model="model.mmName2" border="none" placeholder="请输入姓名">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="逝者性别" class="px-big bg-white" prop="mmSex2" borderBottom required>
					<uv-radio-group v-model="model.mmSex2">
						<uv-radio label="男" name="0" class="mr-normal">
						</uv-radio>
						<uv-radio label="女" name="1">
						</uv-radio>
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="时间类型" class="px-big bg-white" prop="mmDate2" borderBottom required>
					<uv-radio-group v-model="model.mmDate2">
						<uv-radio label="农历" name="time_type_private" class="mr-normal">
						</uv-radio>
						<uv-radio label="公历" name="time_type_public">
						</uv-radio>
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="出生日期" class="px-big bg-white" prop="mmBorn2" borderBottom required>
					<view class="d-flex d-flex-aic">
						<view>
							<span class="lunar mr-small" v-show="model.mmDate2 == 'time_type_private'">农</span>
							<span class="gregorian mr-small" v-show="model.mmDate2 == 'time_type_public'">公</span>
						</view>
						<picker class="d-flex-fx1" mode="date" :value="model.mmBorn2" :start="getDate('start')"
							:end="getDate('end')" @change="bindDateChange($event,'mmBorn2')">
							<view class="uni-input">{{model.mmBorn2||'请选择出生日期'}}</view>
						</picker>
					</view>
				</uv-form-item>
				<uv-form-item label="逝世日期" class="px-big bg-white" prop="mmPassAwayDate2" borderBottom required>
					<view class="d-flex d-flex-aic">
						<view>
							<span class="lunar mr-small" v-show="model.mmDate2 == 'time_type_private'">农</span>
							<span class="gregorian mr-small" v-show="model.mmDate2 == 'time_type_public'">公</span>
						</view>
						<picker class="d-flex-fx1" mode="date" :value="model.mmPassAwayDate2" :start="getDate('start')"
							:end="getDate('end')" @change="bindDateChange($event,'mmPassAwayDate2')">
							<view class="uni-input">{{model.mmPassAwayDate2||'请选择出生日期'}}</view>
						</picker>
					</view>
				</uv-form-item>
			</view>

			<!-- 您与逝者的关系 -->
			<uv-form-item label="您与逝者的关系" class="px-big bg-white mt-small" prop="relation" @click="handleSelectRelation"
				borderBottom required>
				<uv-input v-model="model.relation" disabled disabledColor="#ffffff" placeholder="请选择" border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>

			<!-- 逝者证明 -->
			<uv-form-item label="逝者证明" class="px-big mt-small bg-white my-item" prop="certificateOfDeceased1"
				borderBottom>
				<uni-file-picker v-model='certificateOfDeceased1' class="my-upload" file-mediatype="all"
					file-extname='PNG,JPG,JPEG,BMP,bmp,jpeg,png,jpg' :auto-upload='false'
					@select="handleUploadSuccess($event, 'certificateOfDeceased1')">
					<view class="my-upload">
						<uv-button type="primary" text="选择文件"></uv-button>
					</view>
				</uni-file-picker>
				<view class="desc">
					(请上传逝者死亡证明，若没有可以暂时不选)
				</view>
			</uv-form-item>

			<!-- 墓志铭 -->
			<uv-form-item label="墓志铭" class="px-big mt-small bg-white" prop="epitaph" labelPosition="top">
				<textarea v-model="model.epitaph" class="mt-normal textarea" placeholder="墓志铭..."></textarea>
			</uv-form-item>

			<!-- 人物简介 -->
			<uv-form-item label="人物简介" class="px-big mt-small bg-white" prop="desc" labelPosition="top">
				<textarea v-model="model.desc" class="mt-normal textarea" placeholder="人物简介..."></textarea>
			</uv-form-item>

			<uv-form-item label="手机号码" class="px-big mt-small bg-white" prop="phone" borderBottom required>
				<view class="d-flex d-flex-aic d-flex-jcsb">
					<uv-input v-model="model.phone" maxlength="11" border="none" placeholder="请输入手机号码">
					</uv-input>
					<uv-button type="primary" block :disabled="sendPhone || model.phone.length !== 11"
						@click="handleSendMsg" text="获取验证码"></uv-button>

				</view>
			</uv-form-item>
			<uv-form-item label="验证码" class="px-big bg-white" prop="code" required>
				<uv-input v-model="model.code" border="none" placeholder="请输入验证码">
				</uv-input>
			</uv-form-item>

			<!-- 是否公开 -->
			<uv-form-item label="设为私人馆" class="px-big mt-small bg-white" prop="isPublic" labelPosition="top">
				<uv-switch v-model="model.isPublic" activeValue='1' inactiveValue='0' class="mt-normal"></uv-switch>
			</uv-form-item>
			<uv-form-item label="私人密码" v-if="model.isPublic==1" class="px-big bg-white" prop="pwd" borderBottom
				required>
				<uv-input v-model="model.pwd" border="none" placeholder="请输入私人密码">
				</uv-input>
			</uv-form-item>

			<view class="px-big bg-white">
				<uv-button type="success" :text="props.data?'更新纪念馆':'确认创建纪念馆'" @click="handleSubmit"></uv-button>
			</view>
		</uv-form>

	</view>
</template>

<style lang="scss" scoped>
	.pic {
		height: 200px;
	}

	.avatar {
		width: 80px;
	}

	.bg-popup {
		width: 300px;
		padding: 30px 10px 20px;

		.color-333 {
			color: #333333;
		}

		.scroll-view {
			height: 300px;
		}

		.box {
			height: max-content;
		}

		.item {
			width: calc(50% - 10px);
			margin: 5px;
			box-sizing: border-box;
			height: 200px;
			border: 2px solid #eee;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f5f5f5;
			overflow: hidden;

			&.con {
				border-color: red;
			}
		}
	}

	.bg-ad {
		height: 160px;
	}

	.text-ad {
		font-size: 15px;
		background-color: #d2f5f8;
		color: #3f3e3f;
		text-align: center;
		line-height: 20px;
		padding: 0 10px;
	}

	.form {
		background-color: #ededed;
	}

	.lunar,
	.gregorian {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 18px;
		width: 18px;
		border-radius: 50%;
		border: 1px solid #000;
		color: #fff;
		font-size: 12px;

		&.lunar {
			background-color: #cb8112;
		}

		&.gregorian {
			background-color: #4e6ef2;
		}
	}

	.textarea {
		border: 1px solid #ededed;
		border-radius: 8px;
		display: block;
		width: 100%;
		padding: 10px;
	}

	.my-item {
		position: relative;

		.my-upload {
			margin: 20rpx 0;
			display: flex;
			flex-direction: row-reverse;
		}

		.desc {
			color: #777;
			position: absolute;
			left: 2em;
			width: 100%;
			bottom: 10rpx;
		}
	}
</style>